<template>
	<view class="tab-container bg-white margin-top">
		<view class="cu-list menu contenter">
			<view v-if="bills.length > 0">
				<view class="cu-item arrow" v-for="(item, key) in bills" :key="key" :data-item="item">
					<view class="content" style="display: flex;justify-content: space-between;">
						<view style="width: 10%;">
							<view v-if="item.chargeStatus == '未支付'">
								<radio name="nameRadio" @click="checkr(item)" :checked='item.isCheck'>
								</radio>
							</view>
						</view>
						<view style="width: 88%;" @click="myHouseDetail(item)">
							<view class="flex justify-between">
								<view class="title text-black">费用 {{item.accountDeduction}}</view>
								<view class="btn">
									<button>{{item.chargeStatus}}</button>
								</view>
							</view>
							<view class="text-black text-sm">
								<text class="cuIcon-right margin-right-xs">缴费人姓名</text> {{item.householderName}}
							</view>
							<view class="text-black text-sm">
								<text class="cuIcon-right margin-right-xs">账单金额</text> {{item.amountReceivable}}元
							</view>
							<view class="text-black text-sm">
								<text class="cuIcon-right margin-right-xs">房屋门牌号</text> {{item.houseNumber}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-item" v-if="bills.length === 0">
				<view class="content_bt">
					<text class="cuIcon-warn text-green"></text>
					<text class="text-grey">暂无账单信息</text>
				</view>
			</view>
		</view>

		<view v-if="bills.length > 0" class="bg-white  border flex justify-end align-center"
			style="position: fixed;width: 100%;bottom: 0;">
			<!-- <view v-if="couponUserList != 0 && billsAmount" class="coupon" @click="Preferential">有可用的优惠卷></view> -->
			<view class="action margin-right line-height">
				<view>合计:{{billsAmount}}元</view>
				<!-- <view>实付合计:{{paidAmount==0?billsAmount:paidAmount}}元</view> -->
			</view>
			<view class="btn-group">
				<button class="moneyBtn" type="primary" @click="onPayFee()">缴费</button>
			</view>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" :mask-click='false'>
			<view>
				<text class="text">优惠卷</text>
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"
					v-for="item in couponUserList" :key="item.id">
					<view class="youhui">
						<view class="">{{item.cost}}</view>
						<view class="">{{item.discountsName}}</view>
						<radio name="nameRadio" @click="selectCoupon(item)" :checked='item.ischeck'>
						</radio>
					</view>
				</view>
			</view>
			<view>
				<text class="text">积分</text>
				<view class="youhui">
					<view class="">{{integration.integral}}积分可抵消{{integration.cost}}元</view>
					<view class="">积分</view>
					<radio name="nameRadio" @click="integrations" :checked='integration.ischeck'>
					</radio>
				</view>
			</view>
			<button type="primary" @click="dialogClose">确定去缴费</button>
		</uni-popup>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	export default {
		data() {
			return {
				billsAmount: 0,
				amount: 0,
				money: '',
				bills: "",
				owners: "",
				userId: '',
				// 优惠卷列表
				couponUserList: [],
				type: '',
				// 积分
				integration: '',
				// 选中积分ID
				integrationID: '',
				// 选中的账单
				selectList: [],
				// 选中的优惠券
				pitchCoupon: '',
				// 实付金额
				paidAmount: 0,
				// 选中的账单项
				selectListItem: [],
				// 判断是否显示优惠卷
				couponIstrue: '',
				phone: ''

			};
		},
		onLoad(options) {
			this.userId = uni.getStorageSync('userInfo').id
			this.phone = uni.getStorageSync('commonUser').phone
			this.queryBill();
			// 获取优惠卷
			this.getcouponUser()
			// 获取我的积分
			this.getuserintegral()
		},
		methods: {
			// 积分选择
			integrations() {
				this.integrationID = ''
				this.integration.ischeck = !this.integration.ischeck
				if (this.integration.ischeck) {
					this.integrationID = this.integration.discountsId
				}
			},
			selectCoupon(items) {
				console.log('优惠券');
				this.pitchCoupon = ''
				this.couponUserList.forEach(item => {
					if (item.id == items.id) {
						item.ischeck = !item.ischeck
					} else {
						item.ischeck = false
					}
				})
				this.couponUserList.forEach(item => {
					if (item.ischeck) {
						this.pitchCoupon = item.id
						console.log(this.pitchCoupon, 'dddd');
					}
				})
			},
			// 获取优惠卷
			getcouponUser() {
				uni.request({
					url: constant.url.couponUser,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone: this.phone,
					},
					success: (res) => {
						console.log(res, 'res');
						this.couponUserList = res.data.result.records.filter(item => item.usageStatus == 1)
						console.log(this.couponUserList);
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 查询我的积分
			getuserintegral() {
				uni.request({
					url: constant.url.SelectIntegration,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone: this.phone,
					},
					success: (res) => {
						this.integration = res.data.result
						console.log(res, 'jifen');
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 关闭弹出框
			dialogClose() {
				this.$refs.popup.close()
				uni.request({
					url: constant.url.SelecConpon,
					header: context.getHeaders(),
					method: "POST",
					data: {
						billIds: this.selectList,
						couponId: this.pitchCoupon,
						integralId: this.integrationID,
						userId: this.userId
					},
					success: (res) => {
						let token = uni.getStorageSync("token");
						// 获取支付信息
						uni.request({
							url: constant.url.PaymentConfirmation,
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								"token": token,
							},
							method: "POST",
							data: {
								orderId: res.data.data.id,
								proprietorId: res.data.data.proprietorId
							},
							success: (res) => {
								console.log(res, 'ddd');
								// 吊起微信支付
								wx.requestPayment({
									timeStamp: res.data.data.timeStamp,
									nonceStr: res.data.data.nonceStr,
									package: res.data.data.packages,
									signType: res.data.data.signType,
									paySign: res.data.data.paySign,
									success: function(res) {
										console.log(res);
									},
									fail: function(res) {},
									complete: function(res) {}
								})
							},
							fail: function(e) {
								wx.showToast({
									title: "服务器异常了",
									icon: 'none',
									duration: 2000
								});
							}
						});
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});

				console.log('1111');
			},
			getPropertyFee() {
				uni.request({
					url: constant.url.propertyFee,
					header: context.getHeaders(),
					method: "GET",
					data: {
						id: 20 //业主身份类型
					},
					success: (res) => {
						console.log(res, 'liebiao');
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			checkr(item) {
				this.bills.forEach(items => {
					if (items == item) {
						items.isCheck = !items.isCheck
					}
				})
				// this.selectList = this.bills.filter(item => item.isCheck)
				const con = this.bills.filter(item => item.isCheck)
				this.selectList = []
				this.selectListItem = []
				con.forEach(item => {
					this.selectListItem.push(item)
					this.selectList.push(item.id)
				})
				console.log(this.selectList);
				let sum = 0;
				con.forEach(item => {
					sum = sum + Number(item.amountReceivable)
				})
				this.billsAmount = sum
			},
			queryBill() {
				let _that = this;
				uni.request({
					url: constant.url.propertyFee,
					header: context.getHeaders(),
					method: "GET",
					data: {
						id: 77 //业主身份类型
					},
					success: (ok) => {
						console.log(ok, 'okok');
						this.bills = ok.data.result
					}
				})
			},

			myHouseDetail(_item) {
				uni.navigateTo({
					url: "./billsDetails?bills=" + JSON.stringify(_item)
				})
			},
			// 缴费
			onPayFee() {
				console.log(this.selectListItem, '选中的账单');
				this.couponIstrue = this.selectListItem.some(item => item.accountDeduction == "优惠券和积分" || item
					.accountDeduction ==
					"优惠券" || item.accountDeduction == "积分")
				console.log(this.couponIstrue);
				this.type = 'center'
				this.$refs.popup.open('center')
				if (!this.billsAmount) {

				} else {

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/pagesB/my/myHouse.css";

	.contenter {
		width: 100%;
		height: calc(100vh - 120rpx);
		overflow-y: auto;
	}

	.margin-top {
		margin-top: 0rpx;
	}

	.cu-list {
		width: 100%;
		background-color: white;
		height: 100%;

		.cu-item {
			background-color: #F5F5F5;
			margin: 20rpx 20rpx;
			padding: 20rpx;
			border-radius: 30rpx;
		}
	}

	.btn {
		width: 120rpx;

		button {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 20rpx;
			border-radius: 30rpx;
			border: 1rpx solid black;
		}
	}

	/deep/ .cu-list.menu>.cu-item .content>view:first-child {
		display: flex;
		align-items: end;
	}

	.coupon {
		position: absolute;
		left: 30rpx;
		color: red;
	}

	.text {
		display: flex;
		justify-content: center;
	}

	.youhui {
		margin: 30rpx;
		border-radius: 10rpx;
		background-color: #2774cf;
		display: flex;
		padding: 0 20rpx;
		justify-content: space-around;
		width: 700rpx;
		height: 150rpx;
		align-items: center;
		color: #fff;
	}
</style>
